<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        <div>{{ item.name }} - {{ item.value }}</div>
        <!-- 修改内嵌对象属性 -->
        <button @click="updateItem(index)">修改</button>
      </li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
import { reactive, toRefs, onMounted } from 'vue';

const state = reactive({
  items: [
    { name: 'Item 1', value: 10 },
    { name: 'Item 2', value: 20 },
    { name: 'Item 3', value: 30 },
  ],
});

// 更新数组中对象的属性
const updateItem = (index: number) => {
  state.items[index].value += 1; // 修改对象属性以触发响应式

  console.log(state);
};

const { items } = toRefs(state); // 解构并保持响应性

onMounted(() => {
  state.value = {
    items: [
      { name: 'Item 1', value: 10 },
      { name: 'Item 2', value: 20 },
      { name: 'Item 3', value: 30 },
    ],
  };
  console.log(items.value); // 输出响应式数组
});
</script>

<style scoped>
/* Your styles here */
</style>
